<div *ngIf="claim.id">
    <a id="{{claim.id}}"></a>
    <h3>
        <a (click)="navigate.emit(claim.id)">🔗</a>
        <span class="claim-name" [class.editable]="page.editable" (click)="toggleRebuttals.emit(claim)">{{claim.name}}</span>
    </h3>
    <span class="claim-block" *ngIf="claim.expanded">
        <div [hidden]="!claim.imageLink" class="claim-graphic">
            <a target="_blank" href="{{claim.imageLink}}">
                <img src="{{claim.imageLink}}">
            </a>
            <br>{{claim.imageLabel}}
        </div>
        <br>
        <ul class="container" [sortablejs]="claim.rebuttals" [sortablejsOptions]="options" (update)="reorderRebuttals.emit($event)">
            <li *ngFor="let rebuttal of claim.rebuttals" [ngClass]="{touched: rebuttal.dirty}" id="{{rebuttal.id}}">
                <jhi-bernie-rebuttal [page]="page" [claim]="claim" [rebuttal]="rebuttal" (cancel)="cancelRebuttal.emit($event)" (makeEditable)="makeRebuttalEditable.emit($event)"
                    (save)="saveRebuttal.emit($event)"></jhi-bernie-rebuttal>
            </li>
            <li>
                <button class="btn btn-default btn-xs" title="Add" (click)="addRebuttal.emit(claim)" *ngIf="page.editable" [disabled]="claim.loading">Add</button>
            </li>
        </ul>
    </span>
</div>
